<form class="search-area" fxLayoutGap="16px">
  <mat-form-field floatLabel="never">
    <input [formControl]="batchNoQCtrl" [placeholder]="'Tooltip.q'|translate" autofocus matInput>
  </mat-form-field>
  <span fxFlex></span>
  <button (click)="create()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>add</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="dataSource" fxFlex>
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="workshop">
    <mat-header-cell *matHeaderCellDef>{{'workshop'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.workshop.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="batchNo">
    <mat-header-cell *matHeaderCellDef>{{'batchNo'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.batchNo}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="product">
    <mat-header-cell *matHeaderCellDef>{{'product'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.product.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="spec">
    <mat-header-cell *matHeaderCellDef>{{'Batch.spec'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.spec}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="tubeColor">
    <mat-header-cell *matHeaderCellDef>{{'tubeColor'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.tubeColor}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="tubeWeight">
    <mat-header-cell *matHeaderCellDef>{{'tubeWeight'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.tubeWeight|number:'.3-3'}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="silkWeight">
    <mat-header-cell *matHeaderCellDef>{{'silkWeight'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.silkWeight|number:'.3-3'}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="btns">
    <mat-header-cell *matHeaderCellDef>{{'Common.operation'|translate}}</mat-header-cell>
    <mat-cell (click)="update(row)" *matCellDef="let row" matRipple>
      <mat-icon>edit</mat-icon>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator (page)="onPageEvent($event)" [length]="count$|async" [pageIndex]="pageIndex$|async" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize$|async" showFirstLastButtons></mat-paginator>
